<template>
  <div style="text-align:left;">
    <!--路径-->
    <div class="row-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>


    <!--操作按钮-->
    <div class="row-box"></div>

    <!--数据列表-->
    <div class="row-box"></div>
    
    <!--数据分页-->
    <div class="row-box"></div>
    
    <!--弹出框-->
    <div></div>

    角色列表
    <el-button @click="dialogEdit">编辑菜单权限</el-button>

    <div>
      <el-table :data="roleData" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button @click="dialogRowEdit(scope.row)">配置权限</el-button>
            <el-button>编辑</el-button>
            <el-button>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div>

      <el-dialog title="编辑权限" :visible.sync="dialogVisible" width="30%">
        <div>
          角色名称：<el-input v-model="roleName" :disabled="disable" />
          <el-tree :default-expand-all="true" :data="data" node-key="id" ref="tree" show-checkbox :props="defaultProps"
            @node-click="handleNodeClick"></el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="eventSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>


<script>

export default {
  data() {
    return {
      roleData: [],
      dialogVisible: false,
      roleName: '',
      roleId: '',
      disable: false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  mounted() {
    this.onLoadRoleList()
  },
  methods: {
    //弹出编辑对话框
    dialogRowEdit(row) {
      this.roleName = row.name
      this.roleId = row.id
      this.dialogVisible = true
      this.onLoadMenu()
      this.disable = true

      this.onLoadRoleMenuByRoleId(row.id)

    },

    //还要知道这个角色原来拥有什么菜单权限
    onLoadRoleMenuByRoleId(roleId) {
      let url = this.$baseUrl + '/role/byid'
      this.$http.get(url, {
        params: {
          roleId: roleId
        }
      }).then(res => {
        console.log(res)

        //把这些拥有的菜单权限反填到菜单列表上
        this.$refs.tree.setCheckedKeys(res.data.data)

      })
    },
    //加载角色列表
    onLoadRoleList() {
      let url = this.$baseUrl + '/role'
      this.$http.get(url, {
        params: {
          pageIndex: 1,
          pageSize: 20
        }
      }).then(res => {
        this.roleData = res.data.data.items
      })
    },
    onLoadMenu() {
      let url = this.$baseUrl + '/menu/recursion'
      this.$http.get(url).then(res => {
        this.data = res.data.data
      })
    },
    //提交按钮事件
    eventSubmit() {

      //拿到输入的角色名称（定义一个全局变量 roleName即可）
      //console.log(this.roleName)
      //拿到选中的菜单（id或名称）
      console.log(this.$refs.tree.getCheckedKeys());

      // let url = this.$baseUrl + '/role'
      // let data = {    
      //   "roleId":this.roleId,
      //   "roleName": this.roleName,
      //   "menuIds": this.$refs.tree.getCheckedKeys()
      // }
      // this.$http.post(url, data).then(res => {
      //   this.$message.info(res.data.message)
      //   if (res.data.code == 200) {
      //     this.dialogVisible = false
      //     this.onLoadRoleList()
      //   }
      // })
      //   //拿网络请求的错误
      //   .catch(error => {
      //     console.log(error)
      //     if (error.code == "ERR_NETWORK") {
      //       this.$message.error('网络连接异常，请检查后重试！')
      //     }
      //   })

    },
    handleNodeClick(data) {
      console.log(data);
    },
    //弹出框
    dialogEdit() {
      this.dialogVisible = true
      this.onLoadMenu()
      this.roleId = ''
      this.roleName = ''
      this.disable = false
      this.$refs.tree.setCheckedKeys([]);
    }
  }
};
</script>